<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>000</title>
        <script src="../ajax.js"></script>
        <script>
            window.onload = function () {
                
                var oUl = document.getElementById("wrap");
                var aLi = oUl.getElementsByTagName("li");
                var len = aLi.length;
                
                ajax( "get","getPics.php","cpage=3",  function (datas) {
                    
                    var data = JSON.parse(datas);
                    
                    for(var i=0; i<data.length; i++) {
                            
                        var _index = getShort();
                    
                        var oDiv = document.createElement("div");
                        var oImg = document.createElement("img");
                        oImg.src = data[i].preview;
                        oImg.style.width = "228px";                                      
                        oImg.style.height = data[i].height * 228 /data[i].width + "px";  /
                        oDiv.appendChild(oImg);
                        var oP = document.createElement("p");
                        oP.innerHTML = data[i].title;
                        oDiv.appendChild(oP);
                        aLi[_index].appendChild(oDiv);
                    }
                    
                } )
                
                function getShort() {
                    var index = 0;
                    var ih = aLi[index].offsetHeight;
                    for(var i=1; i<len; i++) {
                        if( aLi[i].offsetHeight < ih ) {
                            index = i;
                            ih = aLi[i].offsetHeight;
                        }

                    }
                    return index;
                }
                
            }
        </script>
        <style>
            html,body {
                margin:0;
                padding:0;
            }
            #wrap {
                width:1100px;
                margin:100px auto 0;
            }
            #wrap li {
                width:250px;
                list-style-type:none;
                float:left;
                text-align:center;
                margin-right:10px;
            }
            #wrap div {
                width:248px;
                margin:0 auto 10px;
                border:1px solid #000;
            }
            #wrap div img {
                width:228px;
            }
        </style>
    </head>
    <body>
        <ul id="wrap">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>